<template>
    <div>
        <el-form ref="dataForm" :model="form" :rules="rules" label-width="0px">
            <el-tabs>
                <el-tab-pane label="基本信息">
                    <!--基本信息start-->
                    <template>
                        <el-descriptions
                                :column="3"
                                border
                                class="margin-top"
                        >
                            <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                                <template slot="label"> 所属省份</template>
                                <el-form-item prop="province_id">
                                    <el-select
                                            style="width:100%"
                                            v-model="form.province_id"
                                            placeholder="请选择省份"
                                            @change="getCitysList()"
                                            clearable
                                    >
                                        <el-option
                                                v-for="item in provinceList"
                                                :key="item.id"
                                                :label="item.district"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                                <template slot="label"> 所属城市</template>
                                <el-form-item prop="city_id">
                                    <el-select
                                            style="width:100%"
                                            placeholder="请选择城市"
                                            v-model="form.city_id"
                                            @change="getDistrictList()"
                                            clearable
                                    >
                                        <el-option
                                                v-for="item in cityList"
                                                :key="item.id"
                                                :label="item.district"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item labelStyle="width: 13%" contentStyle="width: 20%">
                                <template slot="label"> 所属区/县</template>
                                <el-form-item prop="district_id">
                                    <el-select
                                            style="width:100%"
                                            v-model="form.district_id"
                                            placeholder="请选择区/县"
                                            @change="getVillageList()"
                                            clearable
                                    >
                                        <el-option
                                                v-for="item in districtList"
                                                :key="item.id"
                                                :label="item.district"
                                                :value="item.id"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label"> 所属乡镇</template>
                                <el-form-item prop="district_id">
                                    <el-select
                                            style="width:100%"
                                            v-model="form.pid"
                                            placeholder="请选择乡镇"
                                            clearable
                                    >
                                        <el-option
                                                v-for="item in villageList"
                                                :key="item.code"
                                                :label="item.name"
                                                :value="parseInt(item.code)"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item></el-descriptions-item>
                            <el-descriptions-item></el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label"> 名称</template>
                                <el-form-item prop="name">
                                    <el-input
                                            v-model="form.name"
                                            type="text"
                                            clearable
                                    ></el-input>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label"> 全名</template>
                                <el-form-item prop="fullname">
                                    <el-input
                                            v-model="form.fullname"
                                            type="text"
                                            clearable
                                    ></el-input>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <template slot="label"> 编码</template>
                                <el-form-item prop="code">
                                    <el-input
                                            v-model="form.code"
                                            type="text"
                                            clearable
                                    ></el-input>
                                </el-form-item>
                            </el-descriptions-item>

                            <el-descriptions-item>
                                <el-form-item label=" ">
                                    <el-button @click="handleDialogVisible(false)" size="small">取 消</el-button>
                                    <el-button type="primary" @click="!form.id ? create() : update() " size="small">确 定</el-button>
                                </el-form-item>
                            </el-descriptions-item>

                        </el-descriptions>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </div>
</template>

<script>
    import {
        getList,
        postSave,
        getlocking,
        taskDelete,
        gettask,
        getVillage
    } from "@/api/village/village";
    import {regionProvince, regionCity, regionCounty} from "@/api/region/region";

    export default {
        props: ['rowData', 'dialogStatus'],
        components: {},
        data() {
            return {
                //省
                provinceList: [],
                //市
                cityList: [],
                //区县
                districtList: [],
                //乡镇
                villageList: [],
                form: {
                    "id": '',
                    "pid": "",
                    "province_id": "",
                    "city_id": "",
                    "district_id": "",
                    "name": "",
                    "fullname": "",
                    "code": "",
                },
                rules: {
                    province_id: [{
                        required: true,
                        message: "请选择省",
                        trigger: "blur"
                    }],
                    city_id: [{
                        required: true,
                        message: "请选择市",
                        trigger: "blur"
                    }],
                    district_id: [{
                        required: true,
                        message: "请选择区县",
                        trigger: "blur"
                    }],
                    name: [{
                        required: true,
                        message: "名称不能为空",
                        trigger: "blur"
                    }],
                    code: [{
                        required: true,
                        message: "编码不能为空",
                        trigger: "blur"
                    }],
                },
                createLoading: false,
                updateLoading: false,
            }
        },
        created() {
            this.getProvincesList();
            if (this.dialogStatus == 'update') {
                this.form = {...this.rowData}
                this.getCitysList();
                this.getDistrictList();
                this.getVillageList();
            }

        },
        methods: {
            //获取省份
            getProvincesList() {
                regionProvince().then(res => {
                    if (res.code == "200") {
                        this.provinceList = res.data;
                    }
                });
            },
            //获取城市
            getCitysList() {
                regionCity({pid: this.form.province_id}).then(res => {
                    if (res.code == "200") {
                        this.cityList = res.data;
                    }
                });
            },
            //获取区县
            getDistrictList() {
                regionCounty({pid: this.form.city_id}).then(res => {
                    if (res.code == "200") {
                        this.districtList = res.data;
                    }
                });
            },
            //获取乡镇
            getVillageList() {
                getVillage({pid: 0, district_id: this.form.district_id}).then(res => {
                    if (res.code == "200") {
                        this.villageList = res.data;
                        this.villageList.unshift({pid: 0, name: "乡镇级", code: '0'})
                    }
                });
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false
                this.$emit('childByDialogVisible', this.dialogVisible, isUpdate)
            },
            //创建
            create() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.createLoading = true
                        postSave(this.form).then(response => {
                            this.createLoading = false
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true)
                            }
                        })
                    }
                })
            },
            //修改
            update() {
                this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.updateLoading = true
                        postSave(this.form).then(response => {
                            this.updateLoading = false
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true)
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .el-form-item {
        margin: 0;
    }
</style>
